<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@page contentType="text/html;charset=UTF-8" %>
<%@ include file="/commons/taglibs.jsp" %>
<html>
  <head>
    <title>${appname}</title>
	<%@include file="../meta.jsp"%>
	<script src="${ctx}/includes/jquery.js" type="text/javascript"></script>
	<script language="javascript" type="text/javascript" src="${ctx}/js/lhgdialog/lhgdialog.js" charset="utf-8"></script>
	<script src="${ctx}/js/My97DatePicker/WdatePicker.js" type="text/javascript"></script>
	<script src="${ctx}/includes/jquery.form.js" type="text/javascript"></script>
	
	<%-- 
	<script src="${ctx}/includes/jquery.js" type="text/javascript"></script>
	<script src="${ctx}/js/common/jquery-1.6.2.min.js" type="text/javascript"></script>
	<script src="${ctx}/includes/formValidator.js" type="text/javascript"></script>
	<link type="text/css" rel="stylesheet" href="${ctx}/includes/style/validator.css"></link>
	--%>
	<script src="${ctx}/includes/jquery.validate.js" type="text/javascript"></script>
	
	<script type="text/javascript">
		/*
		$(document).ready(function(){
			$.formValidator.initConfig({
				formid:"meeting_add_form",
				onerror:function(msg){alert(msg)},
				onsuccess:function(){addMeeting();return false;}
			});
			
			$("#zt").formValidator({onshow:"请填写标题",defaultvalue:""}).inputValidator({min:1,onerror: "请填写标题!"}).defaultPassed();
			$("#hyrq").formValidator({onshow:"请填写会议日期",defaultvalue:""}).inputValidator({min:1,onerror: "请填写会议日期!"}).defaultPassed();
			$("#mrid").formValidator({onshow:"请选择类别",defaultvalue:""}).inputValidator({min:1,onerror: "请选择类别!"}).defaultPassed();
			$("#nr").formValidator({onshow:"请填写内容",defaultvalue:""}).inputValidator({min:1,onerror: "请填写内容!"}).defaultPassed();
			
		});
		*/
		$(function(){
			$("#meeting_add_form").validate({
				errorPlacement: function(error, element){
		            $(element).next('.field_notice').hide();
		            $(element).after(error);
		       },
			   success: function(label){   
			       label.addClass('right').text('OK!');
			   },
			   rules:   
			   {
			    	zt : {required : true},
	            	hyrq : {required : true},
	            	mrid : {required : true},
	            	hysj : {required : true},
	            	attendUsers:{required : true},
	            	bz: {required : true}
			   },   
			   message:{
			    	zt : {required : '请填写标题'},
	            	hyrq : {required : '请填写会议日期'},
	            	mrid : {required : '请选择类别'},
	            	hysj : {required : '请选择会议时间'},
	            	attendUsers:{required : '请选择参与人员'},
	            	bz : {required : '请填写内容'}
			   },
			   submitHandler: function() {
			   		addMeeting();
			   }
			});  
		});
		
	</script>
  </head>
  
  <body>
    <div class="Teg_body">
    	<%@include file="../header.jsp"%>
    	
    	<div class="Teg_content">
    		<div class="content_left i-pane" id="zhd_LeftPane" paneid="LeftPane">
    			<div class="m-second-menu-title">
	    			<span class="Head">会议室</span>
    			</div>
    			<div class="m-second-menu-ct ZHDAlignleft">
	    			<div class="accordion-3-container">
	    				<ul class="accordion-3">
	    					<li  ${opt == 'my'?'class="active"':''}><div class="level-first"><a href="${ctx}/meeting_myMeeting.do?opt=my">我的会议</a></div></li>
	    					<li ${opt == 'all'?'class="active"':''}><div class="level-first"><a href="${ctx}/meeting_search.do?opt=all">会议总览</a></div></li>
	    					<s:action namespace="/pubApps" name="meetingAuth/getAuth" ></s:action>
	    					<s:if test="%{#request.meetingAuth>0}">
	    					<li class="active"><div class="level-first"><a href="${ctx}/meeting_schedule.do">会议室预定</a></div></li>
	    					</s:if>
	    					<c:forEach items="${lbList}" var="listrow">
	    					<li ${listrow.id == mrid?'class="active"':''}><div class="level-first"><a title="${listrow.bz}" href="meeting_search.do?mrid=${listrow.id}">${listrow.name}</a></div></li>
	    					</c:forEach>
	    				</ul>
	    			</div>
    			</div>
    			
    			<%@include file="../leftmenu.jsp"%>
    		</div>
    		<div class="content_right" style="height: 850px">
    			<div class="second_breadcrumb">
    				<span class="current_position">您的当前位置：<a href="${ctx}">首页</a>></span><span><a href="${ctx}/meeting_search.do" class="SkinObject">会议室预定</a></span>
    			</div>
    			<div class="content_ct i-pane" id="zhd_ContentPane" style="margin-top: 5px;">
    				<s:form action="meeting_save.do" method="post" id="meeting_add_form" enctype="multipart/form-data">
    				<s:token></s:token>
    				<table class="form-table">
    					<tr>
							<th>
								<span class="note_red">*</span>会议主题：
							</th>
							<td>
								<s:textfield key="zt" title="请输入会议主题" cssClass="form-txtinput" id="zt" size="20" maxlength="100" value="%{model.zt}"/>
							</td>
						</tr>
						<tr>
							<th width="110"><span class="note_red">*</span>会议日期：</th>
							<td colspan="2">
								<input type="text" key="hyrq" title="请输入会议日期" name="hyrq" cssClass="form-txtinput" id="hyrq" size="20" onchange="meetingQueryPage();" readonly="true" maxlength="10" onclick="WdatePicker({dateFmt:'yyyy-MM-dd'})" />
							</td>
						</tr>
						<tr>
							<th>
								<span class="note_red">*</span>会议室：
							</th>
							<td>
								<mytag:select id="mrid" onchange="meetingQueryPage();" title="请输入类别" name="mrid" sql="basedata" isSql="false" condition="16" dataType="Long" listKey="id" listValue="name" headerKey="" headerValue="请选择"/>
							</td>
						</tr>
						<tr>
							<th><span class="note_red">*</span>会议时间：</th>
							<td>
								<select name="hysj" multiple="multiple" id="hysj" title="请选择会议时间" style="WIDTH:120px;border:1px solid #DAE0E5;height:150px;" checkEmpty="true" checkDesc="会议时间">
									
								</select>
							</td>
						</tr>
						<tr>
							<th><span class="note_red">*</span>参与人员：</th>
							<td>
								<select multiple="multiple" size="4" id="users" title="请选择参与人员" name="attendUsers" style="width: 120px;;border:1px solid #DAE0E5;height:150px;"></select>
								<span>
								<a class="btn_short" href="javascript:void(0)" title="添加用户" name="btn_addAttendUsers" id="btn_attendUsers"
									onClick="selectUser()">选择</a>
								<a class="btn_short" href="javascript:void(0)" title="删除用户" name="btn_delAttendUsers" id="btn_delAttendUsers" 
								    onClick="deleteUser();">删除</a>
								</span>
							</td>
						</tr>
						<%-- 
						<tr>
							<th width="110">会议内容：</th>
							<td>
								<textarea rows="4" name="bz" style="width:400px;" title="请填写会议内容"></textarea>
							</td>
						</tr>
						--%>
						<tr>
							<th width="110">会议议题1：</th>
							<td>
								<textarea rows="2" name="yt1" style="width:400px;" title="请填写会议议题" id="yt1"></textarea>
							</td>
						</tr>
						<tr>
							<th width="110">会议议题2：</th>
							<td>
								<textarea rows="2" name="yt2" style="width:400px;" title="请填写会议议题" id="yt2"></textarea>
							</td>
						</tr>
						<tr>
							<th width="110">会议议题3：</th>
							<td>
								<textarea rows="2" name="yt3" style="width:400px;" title="请填写会议议题" id="yt3"></textarea>
							</td>
						</tr>
						<tr>
							<th width="110">会议议题4：</th>
							<td>
								<textarea rows="2" name="yt4" style="width:400px;" title="请填写会议议题" id="yt4"></textarea>
							</td>
						</tr>
						<tr>
							<th width="150">附件：</th>
							<td id="files">
							<input name="attachFile" type="file" size="50"/>
							</td>
						</tr>
					</table>
					<div class="win-btn-panel">
						<input class="btn-short" type="button" onclick="addMeeting()" value="提交预定" title="点击提交会议室预定">
					</div>
					
					<div style="overflow-y:scroll;overflow-x:hidden;height:200px;width:100%">
					<table id="addMeeting_grid" width="100%" class="list-table" borderColor="#e3ecf6" bgColor="#e3ecf6" border="0" cellSpacing="1" cellPadding="0">
						<tr style="background: #f6fbff;height: 30px;">
							<th>会议主题</th>
							<th>时间段</th>
							<th>申请人</th>
						</tr>
					</table>
    				</div>
    				</s:form>
    			</div>
    		</div>
    		<div class="clear"></div>
    		
    	</div>
    	<%@include file="../bottom.jsp"%>
    </div>
  </body>
</html>
<script type="text/javascript">

/**
 * 查询当前会议列表
 */
function meetingQueryPage(){
    var form = $("#meeting_add_form");
    if(($('#hyrq').val() != "") && ($('#mrid').val() != "") && $('#mrid').val()!='请选择') {
    	var url = '${ctx}/meeting_timeSlice.do?temptime='+new Date().getTime()+'&hyrqBegin='+$('#hyrq').val()+'&mrid='+$('#mrid').val();
        $.getJSON(url, function(res){
        	//var obj = eval("("+res+")");
        	var obj = res;
        	var timeSlice = obj.timeSlice,meetingList=obj.meetingList;
        	if(timeSlice&&timeSlice.length>0){
        		if($('#hysj')){
		    		var timeSliceObj=jQuery("#meeting_add_form").find("select[name='hysj']");
		    		timeSliceObj.html("");
		    		for(var i=0,iLen=timeSlice.length;i<iLen;i++){
		    			if(timeSlice[i]['isUsed']=="false"){
							timeSliceObj.append("<option value='"+i+"'>"+timeSlice[i]['time']+"</option>");
		    			}
		    		}
		    	}
        	}
        	var table=jQuery("#addMeeting_grid"),html="";
        	table.html('<thead><tr style="background: #f6fbff;height: 30px;"><th>会议主题</th><th>时间段</th><th>申请人</th></tr></thead>');
        	if(meetingList&&meetingList.length>0 && table){
        		for(var j=0,jLen=meetingList.length;j<jLen;j++){
        			//html = meetingList[j].split("\|,\|");
        			html = ["<tr height='30' class='gray'><td align='center'>",meetingList[j].zt,"</td><td align='center'>",meetingList[j].strtime,"</td><td align='center'>",meetingList[j].realname,"</td></tr>"].join("");
        			table.append(html);
        		}
        	}
        });
	}else{
		$('#hysj').innerHTML="";
	}
}

function addMeeting(){
	var v = $("#meeting_add_form").valid();
	if(v){
		var i = 0;
		var mark = true;
		$("#hysj option:selected").each(function(index){
			if(mark){
				if(index == 0){
					i = this.value;
				}else if(this.value == (parseInt(i)+1)){
					i = this.value;
				}else{
					alert('选择的时间不连续，重新选择！');
					mark = false;
				}
			}
        });
		
		if(!mark){
			return ;
		}
		
		var yt1 = $('#yt1').val();
		var yt2 = $('#yt2').val();
		var yt3 = $('#yt3').val();
		var yt4 = $('#yt4').val();
		if(yt1 == "" && yt2 == "" && yt3 == "" && yt4 == ""){
			alert("至少填写一个议题！");
			return ;
		}
		
		$('#meeting_add_form').ajaxSubmit(resultHandler);
    	return false;
	}
}

function resultHandler(responseXML){
	var result = responseXML.getElementsByTagName("result")[0].firstChild.nodeValue;
	var message = responseXML.getElementsByTagName("error-message")[0].firstChild.nodeValue;
	var errorType = responseXML.getElementsByTagName("error-type")[0].firstChild.nodeValue;
	if(!eval(result)&&(errorType!=2)){
		alert(message);
	}else{
		var curDate = new Date(); 
		alert(message);
		location.replace("${ctx}/meeting_schedule.do?timsStamp=" + curDate.getTime());
	}
}

function selectUser(){
  $.dialog({
  	id:'abc', 
  	name:'abc',
  	title:'选择人员', 
  	content: 'url:${ctx}/pub/userAllSelect.jsp?timestamp='+new Date().getTime(), 
  	max:false,
  	min:false,
  	width:600, 
  	height:450,
  	ok: function(){ 
       	abc.selectMoreUser();
        return true; 
    }, 
    cancelVal: '关闭', 
    cancel: true
  });
}
function deleteUser(){
	var selectObj = document.getElementById("users");
	var selectOptions = selectObj.options;
	if (selectOptions == null || selectOptions.length == 0 || selectOptions.selectedIndex == -1){
		var msg="请先选择要删除的人员！";
		alert(msg);
		return;
	}
	var ilen=selectOptions.length;
	for (var i=ilen-1; i>=0; i--){
		if(selectObj[i].selected)
		    selectObj.remove(i);
	}
}
</script>